<template>
  <el-menu-item
    :index="data.path"
    v-if="data.meta.type === 1 && data.meta.show"
    :route="{ name: data.name }"
    :id="'MMenuItem-' + data.name"
  >
    <span slot="title">{{ data.meta.title }}</span>
  </el-menu-item>
  <el-submenu
    :index="data.path"
    v-else-if="data.meta.type === 0 && data.meta.show"
  >
    <template slot="title" v-if="data.meta.title">
      <i
        class="iconfont menu-icon"
        :class="'icon-' + data.meta.icon"
        v-if="data.meta.icon"
      ></i>
      <i class="el-icon-s-help menu-icon" v-else></i>
      <span slot="title">{{ data.meta.title }}</span>
    </template>
    <el-menu-item-group v-if="data.children.length">
      <m-menu-item
        :data="child"
        v-for="child in data.children"
        :key="child.path"
        :id="'MMenuItem-' + child.name"
      ></m-menu-item>
    </el-menu-item-group>
  </el-submenu>
</template>

<script>
export default {
  name: "MMenuItem",
  data() {
    return {};
  },
  props: ["data"],
  components: {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
@import "../../style/var";
</style>
